<template>
    <div id="navs">
        <div class="titles2">部门接单数占比</div>
        <div id="midBottom"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'

    import {getAnswer, getReflectType,getBmReflectType} from "../../../network/home";

    export default {
        name: "midBottom",
        data() {
            return {
                timer:null
            }
        },
        mounted() {
            this.setEchart();
            this.timer = setInterval(() => {
                this.setEchart();
            },30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('中下关闭')
            }
        },
        methods: {
            setEchart() {
                getBmReflectType().then(res => {
                    if (res.code == '200') {
                        // console.log(res.data.dataList)
                        // console.log(res.data.name)
                        let myChart = echarts.init(document.getElementById("midBottom"));
                        myChart.setOption({
                            legend: {
                                x: 'center',
                                y: 'bottom',
                                selectedMode: true,
                                textStyle: {
                                    color: "#00f5ff",
                                    fontSize: 12
                                },
                                data: res.data.name
                            },
                            calculable: true,
                            series: [
                                {
                                    name: '面积模式',
                                    type: 'pie',
                                    radius: [30, 100],
                                    center: ['50%', '38%'],
                                    roseType: 'area',
                                    labelLine: {
                                        lineStyle: {
                                            color: "#00f5ff"
                                        }
                                    },
                                    label: {
                                        color: "#00f5ff",
                                        formatter: '{b}({d}%)'
                                    },
                                    data: res.data.dataList
                                }
                            ]
                        });
                    }
                });

                // getReflectType().then(res => {
                //     if(res.code=='200'){
                //         var sumDatas = []
                //         var indexList = []
                //         var nameDatas = []
                //
                //         for(var i=0;i<res.data.dataList.length;i++){
                //             // 取出有值的数据
                //             if(res.data.dataList[i].value !== 0){
                //                 sumDatas.push(res.data.dataList[i].value)
                //                 nameDatas.push(res.data.dataList[i].name)
                //             }
                //             // 取出有值的数据的索引集合
                //             if(res.data.dataList[i].value!==0){
                //                 // console.log(i)
                //                 indexList.push(i)
                //             }
                //         }
                //
                //         let myChart = echarts.init(document.getElementById("midBottom"));
                //         var myColor = [
                //             '#9845D5',
                //             '#EB305B',
                //             '#6AEEC9',
                //             '#BFA616',
                //             '#02C0DA',
                //             '#4EB05D',
                //             '#33CC33'
                //         ];
                //         myChart.setOption({
                //             grid: {
                //                 top: '4%',
                //                 left: '22%',
                //                 bottom: '6%',
                //                 width: "55%", // 宽度
                //             },
                //             xAxis: [{
                //                 show: false,
                //             }],
                //             yAxis: [{
                //                 axisLine: 'none',
                //                 offset: '10',
                //                 axisLabel: {
                //                     textStyle: {
                //                         color: '#0AEDFF',
                //                         fontSize: '18',
                //                     }
                //                 },
                //                 data:nameDatas // #################################
                //             },
                //                 {
                //                     axisLine: 'none',
                //                     type: 'category',
                //                     axisLabel: {
                //                         margin: 10, //right的 距离
                //                         formatter: function (value) {
                //                             if (value.includes('%')) {
                //                                 return '{a|' + value + '}'
                //                             } else {
                //                                 return '{b|' + value + '}'
                //                             }
                //                         },
                //                         rich: {
                //                             a: {
                //                                 color: '#03CEDD'
                //                             },
                //                             b: {
                //                                 color: '#0AEDFF',
                //                                 fontSize:18
                //                             }
                //                         },
                //                         textStyle: {
                //                             fontSize: '16',
                //                         }
                //                     },
                //                     data: sumDatas,// #################################
                //                 },
                //             ],
                //             series: [{
                //                 name: '', // blue bar
                //                 type: 'bar',
                //                 barWidth: 16,
                //                 itemStyle: {
                //                     normal: {
                //                         color: function (params) {
                //                             var num = myColor.length;
                //                             return myColor[params.dataIndex]
                //                         },
                //                     },
                //                 },
                //                 data: sumDatas,// #################################
                //                 label: {
                //                     normal: {
                //                         show: false,
                //                     }
                //                 },
                //                 animationEasing: 'elasticOut',
                //             }]
                //         })
                //
                //     }
                // });
            }

        }
    }
</script>

<style scoped>
    #navs {
        position: relative;
    }

    .titles2 {
        font-size: 22px;
        color: #E3E30F;
		text-align: center;
    }

    #midBottom {
        width: 100%;
        height: 400px;
    }
</style>
